@use '../../../styles/variables' as *;
@use './axiom-base-sheet';

.axiom-bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--axiom-bottom-sheet-overlay-bg-color);
  backdrop-filter: var(--axiom-bottom-sheet-overlay-backdrop-filter);
  z-index: var(--axiom-bottom-sheet-z-index);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: var(--axiom-bottom-sheet-transition);

  &.is-visible {
    opacity: 1;
    visibility: visible;
    background: var(--axiom-bottom-sheet-overlay-visible-bg-color);
    backdrop-filter: var(--axiom-bottom-sheet-overlay-visible-backdrop-filter);
  }
}

.axiom-bottom-sheet-container {
  @extend .axiom-base-sheet;
  
  width: 100%;
  transform: translateY(100%);
  transition: var(--axiom-bottom-sheet-container-transition);

  .is-visible & {
    transform: translateY(0);
  }
}

.axiom-sheet-header {
  // This might be redundant if base-sheet already provides it.
  // Kept for now, can be removed if styling is inherited correctly.
  @extend .axiom-base-sheet__header;
  
  flex-shrink: 0;
  height: auto;

  .header-left, .header-right {
    flex: 1;
  }

  .header-center {
    flex: 2;
    text-align: center;
    
    .axiom-title { // Assuming c-title becomes axiom-title
      margin: 0;
    }
  }

  .header-right {
    display: flex;
    justify-content: flex-end;
  }
}

.axiom-sheet-content {
  @extend .axiom-base-sheet__content;
  flex-grow: 1;
}

.axiom-sheet-footer {
  @extend .axiom-base-sheet__footer;
  
  flex-shrink: 0;
  padding-top: var(--axiom-bottom-sheet-footer-padding-top);
  margin-top: var(--axiom-bottom-sheet-footer-margin-top);
  border-top: 1px solid var(--axiom-bottom-sheet-footer-border-top-color);
  display: flex;
  justify-content: center;
  gap: var(--axiom-bottom-sheet-footer-gap);
}